<template>
	<view class="container">
		<u-search placeholder="输入电表号搜索" borderColor="#5976ba" :showAction="false" v-model="queryForm.electricityNo"
			clearabled @change="searchHandler"></u-search>
		<u-list @scrolltolower="getList" height="50%">
			<u-list-item v-for="(item, index) in tableData" :key="index">
				<view class="list_item" @click="getDetail(item)">
					<view class="item_cell">
						<text class="tip">电表号:</text>
						<text class="content important">{{item.electricityNo}}</text>
					</view>
					<view class="item_cell">
						<text class="tip">更新后编号:</text>
						<text class="content">
							<u-tag :text="item.projectUpdateNumber" type="warning" plain plainFill></u-tag>
						</text>
					</view>
					<view class="item_cell has_child">
						<view v-if="item.ownerId" class="cell_child">
							<text class="tip">业主:</text>
							<text class="content">
								<u-tag :text="item.ownerName" plain plainFill></u-tag>
							</text>
						</view>
						<view v-if="item.operatorCode" class="cell_child">
							<text class="tip">运营商:</text>
							<text class="content">
								<u-tag :text="item.operator" plain plainFill></u-tag>
							</text>
						</view>
					</view>
					<u-icon name="arrow-right-double"></u-icon>
					<view class="status_tag">
						<u-tag :type="item.status===2 ? 'error' : 'success'" :text="item.status===2 ? '停用' : '正常'"
							size="mini" plain></u-tag>
					</view>
				</view>
			</u-list-item>
			<u-loadmore v-if="tableData.length >= total" status="nomore" />
		</u-list>
		<u-empty v-if="!tableData.length" mode="message" text="无内容" iconColor="#5976ba"></u-empty>
	</view>
</template>

<script>
	import {
		meterList
	} from '@/apis/meter.js'
	export default {
		data() {
			return {
				queryForm: {
					page: 1,
					size: 15,
					electricityNo: null
				},
				total: 0,
				tableData: []
			}
		},
		created() {
			this.getList()
		},
		methods: {
			//获取列表
			async getList() {
				if (this.tableData.length && this.tableData.length >= this.total) return
				if (this.tableData.length && this.tableData.length < this.total) this.queryForm.page += 1
				const {
					data,
					total
				} = await meterList({
					...this.queryForm
				})
				this.queryForm.page === 1 ? this.tableData = data : this.tableData.push(...data)
				this.total = total
			},
			async searchHandler() {
				if (!this.queryForm.electricityNo) {
					this.queryForm.page = 1
				}
				const {
					data,
					total
				} = await meterList({
					...this.queryForm
				})
				this.tableData = data
				this.total = total
			},
			getDetail(row) {
				uni.navigateTo({
					url: `/pages/meter/meterDetail?data=${JSON.stringify(row)}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 20rpx 30rpx;

		.list_item {
			margin: 15rpx 0;
			padding: 20rpx;
			border: 5rpx solid #00188f;
			border-radius: 20rpx;
			position: relative;

			.item_cell {
				padding: 10rpx 0;
				display: flex;
				align-items: center;

				.tip {
					margin-right: 10rpx;
					font-size: 28rpx;
					color: #8c8c8c;
				}

				.content {
					max-width: 200rpx;
					margin-left: 15rpx;
					font-size: 28rpx;
					color: #8c8c8c;

					::v-deep .u-tag__text {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.content.important {
					font-size: 34rpx;
					font-weight: 700;
					color: #0050b3;
				}

				&.has_child {
					justify-content: space-between;

					.cell_child {
						flex: 1;
						display: flex;
						align-items: center;
					}
				}
			}

			.status_tag {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}

			::v-deep .u-icon--right {
				position: absolute;
				right: 10rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 32rpx;
				color: #5976ba;
			}

		}

		::v-deep .u-search {
			height: 5%;
		}

		::v-deep .u-list {
			margin-top: 1%;
			height: 90% !important;
		}

		::v-deep .u-empty {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>